/****************总容器*********************/

.wrapper{
	width: 100%;
	height: 100%;
	
}

/****************header*********************/
.wrapper header{
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #FFFFFF;
	font-size: 4.8vw;
	
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	
	display: flex;
	align-items: center;
	justify-content: center;
}
.wrapper header .back{
	position: absolute;
	width: 2vw;
	height: 2vw;
	left: 1.5vw;
	top: 2.8vw;
	user-select:none;
	cursor: pointer;
}

/*userName*/
.wrapper .userName{
	width: 100%;
	display: flex;
	height: 24vw;
	box-sizing: border-box;
	padding-left: 6vw;
	padding-right: 4vw;
	margin-top: 12vw;
	align-items: center;
	background-color: #EEEEEE;
}

.wrapper .userName img{
	width: 16vw;
	height: 16vw;
	border-radius: 45px;
}
.wrapper .userName .nameP{
	margin-left: 4vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}
.wrapper .userName .nameP h3{
	font-size: 6vw;
	color: #444444;
}
.wrapper .userName .nameP p{
	font-size: 3.6vw;
	color: #888888;
}

/*content*/
.wrapper .content {
	width: 100%;
}
.wrapper .content li{
	width: 100%;
	height: 14vw;
	display: flex;
	justify-content: center;
	align-items: center;
	
	border-bottom: solid 1px #999999;
	font-size: 5vw;
	color: #666666;
}
.wrapper .content li p{
	user-select:none;
	cursor: pointer;
}

/*quit*/
.wrapper .quit{
	width: 100%;
	margin-top: 26vw;
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
}
.wrapper .quit button{
	width: 100%;
	height: 14vw;
	font-size: 4.5vw;
	border: none;
	outline: none;
	color: #FFFFFF;
	background-color: #FF4545;
	border: solid 1px #DDDDDD;
	border-radius: 15px;
}

/***************footer****************/
.wrapper .footer{
	width: 100%;
	height: 14vw;
	border-top: solid 1px #DDDDDD;
	background-color: #FFFFFF;
	
	/*固定在底部 固定定位*/
	position: fixed;
	left: 0;
	bottom: 0;
	
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.wrapper .footer li{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	color: #999999;
	user-selcet:none;
	cursor: pointer;
}
.wrapper .footer li p{
	font-size: 2.8vw;
}
.wrapper .footer li i{
	font-size: 5vw;
}